<template>
  <div >
	<div class="relay" >
		<div class="bg" :style="{'background':'url('+setData.banner+') center center no-repeat'}"></div>
		<div class="control">
			<div class="music">
				<MusicAutoPlay class="open" :icon="icon" :stopIcon="stopicon"   ref="audioCon" :music="setData.bgmusic" v-if="setData.open_music"></MusicAutoPlay>
			</div>
		</div>
		<div class="content" :style="{'margin-top':setData.web_banner_spacing+'rpx'}">
			<div ref="p1_lgo" class="img rotateIn">
				<img :src="setData.web_banner" alt=""/>
			</div>
			<div ref="p1_dec" class="dec">
				<span v-html="data.activity_rules"></span>
			</div>
			<div ref="p1_btn" class="btn_img" @click="nextPage(1)">
				<img :src="setData.enter_button" alt=""/>
			</div>
		</div>
		<div class="bottom_img">
			<img :src="setData.bottom_img" alt=""/>
		</div>
		</div>
		<guide></guide>
	</div>
  </div>
  
</template>

<script>
import {ActivityInfo,getRelayNumber} from '@/api/api.js'
import { mapGetters } from 'vuex'
import {setWechatShare,isWeiXin ,isQianfan,shareFun,checkPlatform,proxyShareFun} from '@/until/QFH5.js'
import watermarkOption from '@/until/water.js'
export default {
   computed: {
	   ...mapGetters(['frameData'])
	},
   components: {
	   
	},
  data() {
    return {
		actid:'',
		data:{},
		setData:{
			open_music:false
		},
		showData:true,
		icon:require('../../../static/poster_relay/music_open.png'),
		stopicon:require('../../../static/poster_relay/music_close.png'),
		// frameData:{},
		isframe:false,//被后端引用,
    }
  },
  
  methods: {
	  //检查平台
	  checkPlat() {
	  	let plat = checkPlatform()
	  	if (!plat) {
	  		this.$store.dispatch('setGuideShow', 4)
	  	}
	  	return plat
	  },
	  nextPage(val){
		  switch(val){
			  case 1: 
					if(this.checkPlat()){
						this.$navigateTo({url:'/plugin/pages/relay/detail?plugin='+this.$route.query.plugin+"&type="+this.$route.query.type+"&id="+this.actid})
					 }
				break;
			  case 2:
				
				break;
			  default:break;
		  }
	  },
	  async init(){
		  let res = {}
		  if(!this.isframe){
		  		res = await ActivityInfo({actid:this.actid})
		  }else{
			  if(Object.keys(this.frameData.data).length>1){
				  res = this.frameData
			  }else{
				  uni.showToast({
				  	title:'数据装载中，稍后',
					icon:'none'
				  })
				  return
			  }
		  }
		  if(res.data.status==0){
			watermarkOption.set('活动未发布')
		  }
		  this.data = res.data
		  this.setData = res.data.settings
		  uni.setStorageSync('platform', JSON.stringify(res.data.settings.platform))
		  this.$setTitle(res.data.title)
		  uni.setStorageSync('title',res.data.title) 
		  let data =  this.data
		  proxyShareFun(data.title,data.settings.relay_photo_image,data.settings.relay_desc,window.location.href)
	  },
	  setAnimationFirstPage(){
		  let lgo = this.$refs['p1_lgo']
		  let dec = this.$refs['p1_dec']
		  let btn = this.$refs['p1_btn']
		  this.$refs['p1_dec'].style.opacity="0"
		  this.$refs['p1_btn'].style.opacity="0"
		  let _this = this
		  lgo.addEventListener('animationend', function() {
		  	_this.$refs['p1_dec'].style.opacity="1"
			_this.$refs['p1_dec'].className="dec animationIn"
		  }, false);
		  dec.addEventListener('animationend', function() {
		    _this.$refs['p1_btn'].style.opacity="1"
		    _this.$refs['p1_btn'].className="btn_img animationInTwo"
		  }, false);
	  },
	  //被当做iframe引用时处理数据
	  setIframeData(){
		this.$store.dispatch('setIframeData')
	  },
  },
  mounted() {
	this.setAnimationFirstPage()
	this.init()
  },
  created() {
	this.actid =uni.getStorageSync('actid')
	let web  = uni.getStorageSync('WEB') || null
	if(web){
		this.isframe  = true
		this.actid = '123'
		this.setIframeData()
	}
  },
  watch:{
	  frameData:{
		  handler(newVal,oldVal){
			  let web  = uni.getStorageSync('WEB') || null
			  if(!web){
			  	return
			  }
			  if(Object.keys(newVal.data).length>1){
				  console.log('更新')
				  this.init()
			  }
		  },deep:true,immediate:true
	  }
  }
  

}
</script>

<style scoped lang="scss">
	@import url("../animation.css");
	.relay{
		padding-top: 1rpx;
		margin-top: -1rpx;
		.bg{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			background-size: cover!important;
			z-index: -1;
		}
		.control{
			position: absolute;
			right: 73rpx;
			top:36rpx;
			.music{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.content{
			width: 640rpx;
			height: 570rpx;
			margin: 146rpx auto 0;
			.img{
				line-height: 0;
				img{
					width: 640rpx;
					// height: 570rpx;
				}
			}
			.dec{
				margin: 61rpx 18rpx 0;
				& >>>> p{
					font-size: 16rpx;
				}
				
				
				// & >>>>
			}
		}
		.btn_img{
			padding-bottom: 60px;
			margin: 104rpx auto;
			width: 478rpx;
			height: 100rpx;
			line-height: 0;
			
			img{
				width: 478rpx;
				// height: 100rpx;
			}
		}
		.bottom_img{
			position: fixed;
			bottom: -1rpx;
			line-height: 0;
			z-index: -1;
			img{
				width: 750rpx ;
				// height: 329rpx;
			}
		}
	}
	.relay_2{
		padding-top: 1rpx;
		margin-top: -1rpx;
		.bg{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			background-size: cover!important;
			z-index: -1;
		}
		.control{
			position: absolute;
			right: 73rpx;
			top:76rpx;
			.music{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.content{
			width: 580rpx;
			// height: 555rpx;
			padding: 30rpx;
			margin: 163rpx auto 0;
			background: rgba(255,255,255,1);
			box-shadow: 0px 9px 22px rgba(0,0,0,0.16);
			.img{
				line-height: 0;
				img{
					width: 580rpx;
					// height: 435rpx;
					// border: 1rpx solid red;
				}
			}
			.dec{
				margin-top: 30rpx;
				height: 90rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				color: #222222;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				line-clamp: 2;
				-webkit-line-clamp: 2;  /*只显示6行*/
				overflow: hidden;   /*溢出隐藏*/
				text-overflow: ellipsis;
			}
		}
		.logo{
			line-height: 0;
		}
		.sign{
			text-align: center;
			width: 255rpx;
			height: 305rpx;
			margin: 37rpx auto 16rpx;
			img{
				width: 255rpx;
				// height: 305rpx;
			}
		}
		.btn{
			width: 478rpx;
			height: 100rpx;
			margin: 0 auto;
			img{
				width: 478rpx;
				// height: 100rpx;
			}
		}
		.share_num{
			width:492rpx;
			font-size: 44rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 62rpx;
			margin: 72rpx auto 83rpx;
			text-align: center;
		}
		.share{
			margin-top: 0;
		}
	}
	
	
	@-webkit-keyframes InFlash {
	
		0% {
			opacity: 0
		}
			
		to {
			opacity: 1
		}
	}
	.animationIn{
		animation:fadeIn 1.5s 1 ease-in-out;
	}
	.animationInTwo{
		animation:fadeIn 1.5s 1 linear;
	}
	.fadeInUpBig3s{
		animation:fadeInUpBig 1s 1 linear;
	}
	
</style>
